<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/register.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="../static/script/base.js"></script>
</head>

<body>
    <div class="width">
        <!-- 头部区域开始 -->
        <header>
            <a href="/index" class="logo"></a>
        </header>
        <!-- 头部区域结束 -->
        <!-- 注册区域开始 -->
        <div class="registerarea">
            <div class="login">
                <h3>注册新用户</h3>
                <h4>我有账号，请<a href="/loginForm">登录</a></h4>
            </div>
            <div class="res_form">
                <form action="/user/userRegister" id="id_register_form">
                    <ul>
                        <li>
                            <label for="">用户名</label>
                            <input type="text" name="name" class="inp">
                            <span class="error" id="error_name"><i class="error_icon"></i>请输入用户名</span>
                        </li>
                        <li>
                            <label for="">邮箱</label>
                            <input type="text" name="email" id="email" class="inp">
                            <span class="error" id="id_error_email"><i class="error_icon"></i>邮箱格式不正确，请重新输入</span>
                        </li>
                        <li>
                            <label for="">邮箱验证码</label>
                            <input type="text" name="emailCode" id="code" class="inp">
                            <input type="button" id="id_send_code" style="height:32px;width:120px;color: #333333" value="点击发送验证码" />
                        </li>
                        <li>
                            <label for="">登陆密码</label>
                            <input type="password" name="password" id="pwd" class="inp">
                            <span class="error"><i class="error_icon"></i>密码格式不正确，请从新输入</span>
                        </li>
                        <li class="safe">
                            安全程度
                            <i class="ruo">弱</i>
                            <i class="zhong">中</i>
                            <i class="qiang">强</i>
                        </li>
                        <li>
                            <label for="">确认密码</label>
                            <input type="password" name="" id="again_pwd" class="inp">
                            <span class="error" id="id_error_again_pwd"><i class="error_icon"></i>两次密码输入不一致</span>
                        </li>
                        <li class="agree">
                            <input type="checkbox" name="" id="">
                            同意协议并注册<a href="#">《知晓用户协议》</a>
                        </li>
                        <li>
                            <input type="button" id="btn_register" value="完成注册" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- 注册区域结束 -->
        <!-- 尾部区域开始 -->
        <footer>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a>|
                    <a href="#">联系我们</a>|
                    <a href="#">联系客服</a>|
                    <a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|
                    <a href="#">友情链接</a>|
                    <a href="#">销售联盟</a>|
                    <a href="#">食品网社区</a>|
                    <a href="#">English Site</a>|
                    <a href="#">Contact U</a>|
                </div>
                <div class="copyright">
                    地址：内蒙古师范大学盛乐校区 邮编：010000 电话：400-123-1234 传真：010-12345678 邮箱: 1234567@567.com</br>
                    蒙ICP备08001234号蒙公网安备110123456789
                </div>
            </div>
        </footer>
        <!-- 尾部区域结束 -->
    </div>
    <script type="text/javascript">
     var clock = '';
     var nums = 60
     var btn;
     function sendCode(thisBtn)
     {
         btn = thisBtn;
         btn.disabled = true; //将按钮置为不可点击
         btn.value = nums+'秒后可重新获取';
         clock = setInterval(doLoop, 1000); //一秒执行一次
     }
     function doLoop()
     {
         nums--;
         if(nums > 0){
             btn.value = nums+'秒后可重新获取';
         }else{
             clearInterval(clock); //清除js定时器
             btn.disabled = false;
             btn.value = '点击发送验证码';
             nums = 60; //重置时间
         }
     }
     $('#id_send_code').click(function () {
         var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
         var email = $('#email').val()
         var error_email = $('#id_error_email')
         if (isNull(email) || !reg.test(email)){
             error_email.css('display','inline-block')
         }else{
             error_email.css('display','none')
             var data = {'email':email}
             sendCode(this)
             $.ajax(
                 {
                     type:'POST',
                     url:'/user/emailCode',
                     data:JSON.stringify(data),
                     contentType:"application/json",
                     success:function (result){
                         if(result.code==2000){
                             alert("发送成功")
                         }
                     }
                 }
             )
         }
     })
    </script>
    <script>
        var error = $('.error')
        $('#btn_register').click(function (){
            hideError()
            var form = $('#id_register_form')
            var targetUrl = form.attr('action')
            var formObject = {};
            var formArray = form.serializeArray()
            var flag = true
            $.each(formArray,function (i,item){
                if (isNull(item.value)){
                    error.eq(i).css("display","inline-block")
                    flag = false;
                }
                formObject[item.name] = item.value;
            });
            if(!pwdCheck()){
                $('#id_error_again_pwd').css("display","inline-block")
                return;
            }
            if (!emailCheck($('#email').val())){
                $('#id_error_email').css("display","inline-block")
                return;
            }
            $('#id_error_again_pwd').css("display","none")
            $('#id_error_email').css("display","none")
            var info = {'user':formObject}
            console.log(info)
            if(flag){
                    $.ajax(
                        {
                            type:'POST',
                            url:targetUrl,
                            data:JSON.stringify(info),
                            contentType:"application/json",
                            success:function (result) {
                                if (result.code==2000){
                                    alert("注册成功")
                                    $(location).attr('href','index');
                                }else{
                                    alert(result.message)
                                }
                                hideError()
                            }
                        }
                    )
                }
        })
    </script>
    <script>
        var hideError=function(){
            for(var i=0;i<error.length;++i){
                error.eq(i).css("display","none")
            }
        }
        var pwdCheck = function (){
            return $('#pwd').val()==$('#again_pwd').val()
        }
        var emailCheck = function (email){
            var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            return reg.test(email)
        }
    </script>
</body>
</html>